<template>
	<div>
		<p class="text-#86909C">{{ props.title }}</p>
		<div class="mt-10px flex items-center ">
			<div v-for="(item,index) in netList" :key="index" class="flex item-center p-20px border-1px border-#E5E6EB rounded-10px box-border border-solid w-240px mr-20px cursor-pointer">
				<img src="/icons/radio-null.svg" class="w-16px h-20px mr-20px" v-show="(item.desc !== netSelected.desc)">
				<img src="/icons/radio-selected.svg" class="w-16px h-20px mr-20px" v-show="(item.desc == netSelected.desc)">
				<p>{{ item.desc }}</p>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
interface IProps{
	title: string;
}
const props = defineProps<IProps>();
const netList = ref<any[]>([
	{
		desc: 'Ethereum(ERC20)'
	},
	{
		desc: 'Tron(TRC20)'
	}
])

const netSelected = ref<any>(netList.value[0])
</script>
<style lang="scss" scoped></style>
